#mapWarning, #mapFlood {
	position: absolute;
	top: 0;
	// z-index: 99;
	width: 100%;
	height: 100%;
	pointer-events: none;
	.left-view {
		width: 280px*@ratio;
		height: 510px*@ratio;
		border-radius: 6px*@ratio;
		background-color: rgba(9,43,71, .34);
		.up-div {
			width: 100%;
			height: 220px*@ratio;
			background: rgba(14,64,102, .54);
			padding: 30px*@ratio;
			border-radius: 6px*@ratio;
			.title {
				font-size: 18px*@ratio;
				color: #FFFFFF;
			}
			.text-view {
				font-size: 12px*@ratio;
				color: #FFFFFF;
				line-height: 30px*@ratio;
				margin-top: 10px*@ratio;
			}
		}
	}
	
	.down-div {
		width: 100%;
		height: auto;
		padding: 20px*@ratio 30px*@ratio;
		border-radius: 6px*@ratio;
		pointer-events: auto;
		.title {
			font-size: 14px*@ratio;
			color: #FFFFFF;
		}
		.content{
			margin: 10px*@ratio 0 0;
			height:230px*@ratio;
			overflow: auto;
		    .el-timeline {
		        .el-timeline-item {
		            padding-bottom: 5px*@ratio;
				
		            .el-timeline-item__tail {
		                border-left: 2px*@ratio solid #10AFF3;
		                left: 4px*@ratio;
		            }
				
		            .el-timeline-item__node {
		                background: #10AFF3;
		                left: 0;
		                width: 10px*@ratio;
		                height: 10px*@ratio;
				
		            }
				
		            .el-timeline-item__wrapper {
		                padding-left: 15px*@ratio;
				
		                .el-timeline-item__timestamp {
		                    color: rgba(255, 255, 255, .4);
		                    font-size: 10px*@ratio;
				
		                    &.is-top {
		                        margin-bottom: 6px*@ratio;
		                        padding-top: 2px*@ratio;
		                    }
		                }
				
		                .el-timeline-item__content {
		                    color: rgba(255, 255, 255, .6);
		                    font-size: 10px*@ratio;
		                    line-height: 15px*@ratio;
		                    padding: 7px*@ratio;
		                    background: #093858;
		                }
		            }
		        }
		    }
		}
	}
	.content-view {
		position: absolute;
		bottom: 100px*@ratio;
		right: 100px*@ratio;
		width: 50%;
		height: 60px*@ratio;
		background: url(../../assets/images/sliderBg.png) no-repeat center/100% 100%;
		
		.spot1, .spot2, .spot3, .spot4 {
			// background-color: #000000;
			height: 10px*@ratio;
			width: 20px*@ratio;
			margin-top: 22px*@ratio;
			pointer-events: auto;
		}
		.spot1 {
			margin-left: 27.5%;
		}
		.spot2 {
			margin-left: 15%;
		}
		.spot3 {
			margin-left: 15.5%;
		}
		.spot4 {
			margin-left: 14.5%;
		}
		// .right-view {
		// 	right: 180px*@ratio;
		// }
		img {
			position: absolute;
			top: 63px;
		}
		// border: 1px*@ratio solid #045085;
		// background-color: #011d3b;
	}
	.right-view {
		position: absolute;
		top: 0;
		right: 60px*@ratio;
		pointer-events: auto;
		img {
			cursor:pointer;
			width: 130px*@ratio;
			height: 50px*@ratio;
		}
		button{
			cursor:pointer;
			width: 130px*@ratio;
			height: 50px*@ratio;
			font-size: 14px*@ratio;
			border: 0;
			background: #0b2a49;
			color: #fff;
			display: block;
		}
	}
}

#index {
	.popover-view {
		width: 579.5px*@ratio;
		min-height: 200px * @ratio;
		height: auto;
		position: absolute;
		bottom: 130px * @ratio;
		left:635px * @ratio;
		background-color: #081d2b;
		z-index: 9999;
		border: 1px*@ratio solid rgba(255,255,255,.5);
		border-radius: 5px*@ratio;
		tbody{
			height: 200px*@ratio;
		}
		.arrow-p {
			position: absolute;
			bottom: -15px*@ratio;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: -1;
		}
		
		.arrow-p::after {
			content: "";
			width: 26px*@ratio;
			height: 26px*@ratio;
			border-bottom: 1px*@ratio solid rgba(255,255,255,.5);
			border-right: 1px*@ratio solid rgba(255,255,255,.5);
			transform: rotate(45deg);
			background-color: #081d2b;
		}
		img {
			width: 200px*@ratio;
			height: 100px*@ratio;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
	.map-dialog {
		width: 500px*@ratio;
		height: 330px*@ratio;
		overflow: hidden;
		
	}
	.borderA {
		border-radius: 5px*@ratio;
		border: 1px*@ratio solid #19639B;
	}
	#iframeB {
		width: 438px*@ratio;
		height: 602px*@ratio;
		transform: scale(0.3);
		position: absolute;
		top: -210px*@ratio;
		left: -152px*@ratio;
	}
	.whMin {
		border-radius: 5px*@ratio;
		height: 100%;
		width: 100%;
	}
	.map-home {
		position: absolute;
		top: 0;
		left: 20*@ratio;
		z-index: 999;
	}
}

#mapFlood {
	// .spot1, .spot2, .spot3, .spot4 {
	// 	// background-color: #000000;
	// 	height: 10px*@ratio;
	// 	width: 20px*@ratio;
	// 	margin-top: 22px*@ratio;
	// 	pointer-events: auto;
	// }
	// .spot1 {
	// 	margin-left: 27.5%;
	// }
	// .spot2 {
	// 	margin-left: 15%;
	// }
	// .spot3 {
	// 	margin-left: 15.5%;
	// }
	// .spot4 {
	// 	margin-left: 14.5%;
	// }
	// .right-view {
	// 	right: 180px*@ratio;
	// }
	// img {
	// 	position: absolute;
	// 	top: 63px;
	// }
	
}
#mapHome {
	position: absolute;
	top: 0;
	left: 20px*@ratio;
	.btn-view {
		width: 150px*@ratio;
		height: 45px*@ratio;
		background: rgba(8,29,43,0.68);
		border:2px*@ratio solid rgba(153, 170, 181, 0.6);
		border-radius: 5px*@ratio;
		
		img {
			padding-right: 15px*@ratio;
			height: 28px*@ratio;
			margin: 10px*@ratio 0 6px*@ratio;
		}
		p {
			color: rgba(254, 255, 255, 0.9);
			font-size: 16px*@ratio;
			letter-spacing:4px*@ratio;
		}
	}
	.centerH {
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.body-view {
		width: 276px*@ratio;
		height: 505px*@ratio;
		background: rgba(14, 51, 90, 0.9);
		border-radius: 5px*@ratio;
		position: relative;
		padding-top: 12px*@ratio;
		padding-left: 21px*@ratio;
		.eliminate-img {
			width: 100px*@ratio;
			height: 30px*@ratio;
			position: absolute;
			top: 6px*@ratio;
			right: 50px*@ratio;
		}
			
		.return-img {
			width: 30px*@ratio;
			height: 30px*@ratio;
			position: absolute;
			top: 6px*@ratio;
			right: 6px*@ratio;
			
		}
		
		.sign-view {
			width: 100%;
			clear: both;
			padding-top: 10px*@ratio;
			.children {
				display: flex;
				align-items: flex-end;
				margin: 6px*@ratio 0;
				width: 47%;
				float: left;
				
				.icon {
					width: 14px*@ratio;
					height: 14px*@ratio;
					margin-right: 6px*@ratio;
				}
			}
			.txt {
				color: #ffffff;
				font-size: 12px*@ratio;
				opacity: .6;
			}
		}
	}
	.el-checkbox__inner {
		background-color: #092037!important;
		border: 1px*@ratio solid #9DA7B1!important;
		width: 10px*@ratio!important;
		height: 10px*@ratio!important;
	}
	.el-checkbox {
		font-size: 10px*@ratio!important;
	}
	.el-checkbox__inner::after {
		height: 7px*@ratio!important;
		width: 3px*@ratio!important;
		// border: 1px*@ratio solid #fff!important;
		border: 1px*@ratio solid #FFF!important;
		border-left: 0!important;
		border-top: 0!important;
		left: 2px*@ratio!important;
		top: 1px-@ratio!important;
	}
}